<template>
	<view class="gift-popup">
		<view class="gift-popup-box">
			<view class="shop-header">
				<text>祭奠确认</text>
				<van-icon name="cross" class="close-icon" @click="handleClosePopup" />
			</view>

			<view class="shop-content">
				<van-field v-model="confirmationMessage" type="textarea" placeholder="输入祭奠寄语 (可选)" rows="3" class="shop-content-input"/>

				<view class="cost-info">
					本次敬献需要 {{ selectedItem?.price ?? 0 }} 永恒币，扣除方式：
				</view>

				<van-radio-group v-model="paymentMethod">
					<view class="radioBox">
						<view class="payment-option">
							<van-radio label="user_account" :name="1">用户永恒币</van-radio>
							<text style="margin-left: 80rpx;">可用 {{ userInfo.user_coin }} 永恒币</text>
						</view>
						<!-- <view class="payment-option">
							<van-radio label="public_account" disabled :name="2">本馆公共账户</van-radio>
							<text>可用 {{ userInfo.publicBalance }} 永恒币</text>
						</view> -->
					</view>
					
				</van-radio-group>

				<view class="dialog-footer">
					<van-button type="primary" @click="handleSubmit" class="dialog-footer-btn">确认敬献</van-button>
					<van-button @click="handleClose" class="dialog-footer-btn">取消本次敬献</van-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, defineProps, defineEmits, defineExpose } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	const props = defineProps({
		muDetail: {
			type: Object,
			default: () => ({}),
		},
	});
	const userInfo = ref<any>({})
	onLoad(()=>{
		userInfo.value = uni.getStorageSync('userInfo')
		console.log(userInfo.value)
	})
	const emit = defineEmits<{
		(e : 'success', params : object) : void;
		(e : 'close') : void;
		(e : 'closePopup') : void;
	}>();

	const confirmationMessage = ref('');
	const paymentMethod = ref(1);
	const userBalance = ref(0);
	const publicBalance = ref(0);
	const selectedItem = ref<Object | null>(null);

	const handleSubmit = () => {
		let price = selectedItem.value?.price ?? 0;
		let params = { ...selectedItem.value, confirmationMessage: confirmationMessage.value };
		emit('success', params);
	};

	const handleClose = () => {
		emit('close');
	};
	const handleClosePopup = () => {
		emit('closePopup');
	};
	
	const open = (type = 'add') => {
		
	}
	const setFormData = (data: Record<any, any>) => {
		console.log('===================================',data.selectItem)
		selectedItem.value = data.selectItem
	}
	
	defineExpose({
		open,
		setFormData
	});
</script>

<style scoped lang="scss">
	.gift-popup {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 9999;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
		.gift-popup-box{
			width: 100%;
			background-color: #FFFFFF;
		}
	}

	.shop-header {
		padding: 10px;
		text-align: center;
		background-color: #f9f6f0;
		// position: relative;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		box-sizing: border-box;
		text{
			width: calc(100% - 40rpx);
		}
		.close-icon{
			width: 40rpx;
			// position: absolute;
			// top: 40rpx;
			// right: 15rpx;
			// transform: translateY(-50%);
			font-size: 40rpx;
		}
	}

	.shop-content {
		padding: 15px;
	}

	.dialog-footer {
		display: flex;
		justify-content: space-between;
		margin-top: 15px;
		.dialog-footer-btn{
			width: 50%;
			font-size: 32rpx;
		}
	}

	.payment-option {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		&:nth-child(2){
			margin-left: 40rpx;
		}
	}

	.cost-info {
		margin: 10px 0;
		color: #666;
	}
	.radioBox{
		display: flex;
	}
	.shop-content-input{
		  /* 设置输入框内文字大小 */
		  ::v-deep .van-field__control {
		    font-size: 36rpx !important; /* 使用 !important 确保覆盖，但尽量避免 */
		  }
		
		  /* 设置标签文字大小 */
		  ::v-deep .van-field__label {
		    font-size: 36rpx !important;
		    width: auto; /* van-field label 默认有固定宽度，如果文字多了需要调整 */
		    min-width: var(--van-field-label-width, 6.2em); /* 保留vant的最小宽度或自定义 */
		  }
		
		  /* 设置占位符文字大小 (注意：placeholder 样式比较特殊) */
		  ::v-deep .van-field__control::placeholder {
		    font-size: 32rpx !important;
		    /* color: #999;  可以同时设置颜色 */
		  }
	}
</style>